<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="description"
	content="Metro, a sleek, intuitive, and powerful framework for faster and easier web development for Windows Metro Style.">
<meta name="keywords"
	content="HTML, CSS, JS, JavaScript, framework, metro, front-end, frontend, web development">
<meta name="author"
	content="Sergey Pimenov and Metro UI CSS contributors">

<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
<title>DataTables</title>

<link href="${pageContext.request.contextPath }/css/metro.css"
	rel="stylesheet">
<link href="${pageContext.request.contextPath }/css/metro-icons.css"
	rel="stylesheet">
<link
	href="${pageContext.request.contextPath }/css/metro-responsive.css"
	rel="stylesheet">

<script src="${pageContext.request.contextPath }/js/jquery-2.1.3.min.js"></script>
<script
	src="${pageContext.request.contextPath }/js/jquery.dataTables.min.js"></script>

<script src="${pageContext.request.contextPath }/js/metro.js"></script>

<style>
html,body {
	height: 100%;
}

body {
	
}

.page-content {
	padding-top: 1.5rem;
	min-height: 100%;
	height: 100%;
}

.table .input-control.checkbox {
	line-height: 1;
	min-height: 0;
	height: auto;
}

@media screen and (max-width: 800px) {
	#cell-sidebar {
		flex-basis: 52px;
	}
	#cell-content {
		flex-basis: calc(100% - 52px);
	}
}
</style>
<script>
        function pushMessage(t){
            var mes = 'Info|Implement independently';
            $.Notify({
                caption: mes.split("|")[0],
                content: mes.split("|")[1],
                type: t
            });
        }

        $(function(){
            $('.sidebar').on('click', 'li', function(){
                if (!$(this).hasClass('active')) {
                    $('.sidebar li').removeClass('active');
                    $(this).addClass('active');
                }
            })
        })
    </script>

<script type="text/javascript">
	function deleteStuffs() {
		window.location.href = "${pageContext.request.contextPath }/stuff/deleteStuffs.action";
	}
	function queryStuffs(idStuffdepartment) {
		window.location.href = "${pageContext.request.contextPath }/stuff/queryStuffByDepartment.action?idStuffdepartment="+idStuffdepartment;
	}
	function yuandiao(idStuff,departmentName){
    	$.ajax({
			type : 'post',
			url : 'updateDepartmentId.action',
			//请求的是key/value 不需要指定contentType，因为默认就是key/value类型
			//数据格式是key/value的串
			data : 'idStuff='
					+ idStuff,
			success : function(data) {
				//返回json结果
				if(departmentName!="调离"){
    				alert(data.message);
    				queryStuffs('${idDepartment}');
				}
			}
		}); 
    }
</script>
</head>
<body>
	<div class="app-bar fixed-top darcula" data-role="appbar"
		style="text-align: center;">
		<a class="app-bar-element branding "
			href="${pageContext.request.contextPath }/jsp/index.jsp"
			style="display: block; width: 200px">首页 </a> <span
			class="app-bar-divider"></span>
		<ul class="app-bar-menu">
			<li><a href="" style="display: block; width: 180px">休假记录查询</a></li>
			<li><a href="" style="display: block; width: 180px">加班记录查询</a></li>

			<li><a
				href="${pageContext.request.contextPath }/stuff/queryStuff.action "
				style="display: block; width: 180px">高级查询</a></li>
			<li><a href="" style="display: block; width: 180px"
				class="dropdown-toggle">工具包</a>
				<ul class="d-menu" data-role="dropdown">
					<li><a
						href="${pageContext.request.contextPath }/jsp/toolkit/labour.jsp">劳保发放</a></li>
					<li><a
						href="${pageContext.request.contextPath }/stuffinformation/stuffinfo.action">导出到excel</a></li>
				</ul></li>
			<li><a
				href="${pageContext.request.contextPath }/jsp/stuffinf/stuff.jsp?idStuff=${idStuff}"
				style="display: block; width: 180px">个人主页</a></li>
		</ul>

		<div class="app-bar-element place-right">
			<span class="dropdown-toggle"><span class="mif-cog"></span>
				${username }</span>
			<div
				class="app-bar-drop-container padding10 place-right no-margin-top block-shadow fg-dark"
				data-role="dropdown" data-no-close="true" style="width: 220px">
				<h2 class="text-light">Quick settings</h2>
				<ul class="unstyled-list fg-dark">
					<li><a href="" class="fg-white1 fg-hover-yellow">Profile</a></li>
					<li><a
						href="${pageContext.request.contextPath }/jsp/stuffinf/user.jsp"
						class="fg-white2 fg-hover-yellow">Security</a></li>
					<li><a
						href="${pageContext.request.contextPath }/user/logout.action"
						class="fg-white3 fg-hover-yellow">退出</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="page-content">
		<div class="flex-grid no-responsive-future" style="height: 100%;">
			<div class="row" style="height: 100%">
				<div class="cell size-x200" id="cell-sidebar"
					style="background-color: #71b1d1; height: 100%">
					<br /> <br /> <br /> <br /> <br />
					<ul class="sidebar">
						<li><a href="javascript:void(0)" onclick="queryStuffs('')">
								<span class="title" style="font-size: 18px">所有员工</span>
						</a></li>

						<c:forEach items="${departments }" var="department">
							<li><a href="javascript:void(0)"
								onclick="queryStuffs(${department.idStuffdepartment })"><span
									class="title" style="font-size: 18px">${department.name}
								</span> </a></li>
						</c:forEach>
					</ul>
				</div>
				<div class="container page-content">
					<br />
					<br />
					<br />
					<br />
					<br />
					<table id="datatable" class="dataTable striped border bordered"
						data-role="datatable" data-searching="true">
						<thead>
							<tr>
								<th>工号</th>
								<th>姓名</th>
								<th>部门</th>
								<th>生日</th>
								<th>远调</th>
							</tr>
						</thead>
						<tbody>
							<c:forEach items="${stuffs }" var="stuff">
								<tr>
									<td>${stuff.stuffnumber }</td>
									<td><a
										href="${pageContext.request.contextPath }/jsp/stuffinf/stuff.jsp?idStuff=${stuff.idStuff} ">${stuff.name
											}</a></td>

									<td>${stuff.departmentName }</td>
									<td><fmt:formatDate value="${stuff.birthday }"
											pattern="yyyy-MM-dd" /></td>
									<td>
										<!-- 判断不起作用 --> <c:if test="${stuff.departmentName!='调离'} ">
											${stuff.departmentName!='调离'}
										</c:if> <a href="javascript:void(0)"
										onclick="yuandiao('${stuff.idStuff}','${stuff.departmentName }')">远调</a>
									</td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</body>
</html>